<section id="downloads" class="section">
  <div class="container downloads__container">
    {% include "_well-template.html" %}
    <div class="section__header">
      <h2 class="section__title">Downloads</h2>
      <p class="lead section__lead">Select your device type</p>
    </div>
    <div class="row downloads__row">
      {% for title, cat in downloads.categories %}
        <div class="col-md-3">
          <a id="downloads-{{ title|replace(' ', '', 'g')|lower }}" class="downloads__category" href="#downloads-{{ title|replace(' ', '', 'g')|lower }}" data-cat="{{ cat|json }}">
            <img class="downloads__category__image" src="/images/icons/downloads/{{ title|replace(' ', '', 'g')|lower }}.png" srcset="/images/icons/downloads/{{ title|replace(' ', '', 'g')|lower  }}@2x.png 2x">
          </a>
        </div>
        {% if loop.index % 4 == 0 %}
          </div><div class="row downloads__row">
        {% endif %}
      {% endfor %}
    </div>
    <div class="row">
      <div class="col-sm-12">
        <a data-track="link click" data-track-attr='{ "title": "Build your own", "href": "/docs/custombuild/#supporting-your-own-board", "position": "downloads" }' class="downloads__category downloads__category--custom" href="/docs/custombuild/#supporting-your-own-board">
          <div class="downloads__category--custom__container">
            <img class="downloads__category__image downloads__category__image--custom" src="/images/icons/add.png" srcset="/images/icons/add@2x.png 2x">
            <h4 class="downloads__category__title">Add your </br>own board</h4>
          </div>
        </a>
      </div>
    </div>
  <hr class="section__hr">
</section>
